import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
// import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../logo.svg'

export default class LineAmcharts extends React.Component {
  getChartData = () => {
    const data = [{
      "year": "1994",
      "cars": 1587,
      "motorcycles": 0,
      "bicycles": 121,
      "series1": "https://www.amcharts.com/lib/images/faces/A04.png",
      "series2": "https://www.amcharts.com/lib/images/faces/C02.png",
      "series3": "https://www.amcharts.com/lib/images/faces/D02.png",
    }, {
      "year": "1995",
      "cars": 1567,
      "motorcycles": 683,
      "bicycles": 146,
      "series1": "https://www.amcharts.com/lib/images/faces/C02.png"
    }, {
      "year": "1996",
      "cars": 1617,
      "motorcycles": 691,
      "bicycles": 138,
      "series1": "https://www.amcharts.com/lib/images/faces/D02.png"
    }, {
      "year": "1997",
      "cars": 1630,
      "motorcycles": 642,
      "bicycles": 127
    }, {
      "year": "1998",
      "cars": 1660,
      "motorcycles": 699,
      "bicycles": 105,
      "series1": "https://www.amcharts.com/lib/images/faces/E01.png"
    }, {
      "year": "1999",
      "cars": 1683,
      "motorcycles": 721,
      "bicycles": 109
    }, {
      "year": "2000",
      "cars": 1691,
      "motorcycles": 737,
      "bicycles": 112
    }, {
      "year": "2001",
      "cars": 1298,
      "motorcycles": 680,
      "bicycles": 101
    }, {
      "year": "2002",
      "cars": 1275,
      "motorcycles": 664,
      "bicycles": 97
    }, {
      "year": "2003",
      "cars": 1246,
      "motorcycles": 648,
      "bicycles": 93
    }, {
      "year": "2004",
      "cars": 1318,
      "motorcycles": 697,
      "bicycles": 111
    }, {
      "year": "2005",
      "cars": 1213,
      "motorcycles": 633,
      "bicycles": 87
    }, {
      "year": "2006",
      "cars": 1199,
      "motorcycles": 621,
      "bicycles": 79
    }, {
      "year": "2007",
      "cars": 1110,
      "motorcycles": 210,
      "bicycles": 81
    }, {
      "year": "2008",
      "cars": 1165,
      "motorcycles": 232,
      "bicycles": 75
    }, {
      "year": "2009",
      "cars": 1145,
      "motorcycles": 219,
      "bicycles": 88
    }, {
      "year": "2010",
      "cars": 1163,
      "motorcycles": 201,
      "bicycles": 82
    }, {
      "year": "2011",
      "cars": 1180,
      "motorcycles": 285,
      "bicycles": 87
    }, {
      "year": "2012",
      "cars": 1159,
      "motorcycles": 277,
      "bicycles": 71
    }];
    return data
  }
  createValueAxis = () => {
    let chart = this.chart
    let valueAxis = chart.xAxes.push(new am4charts.ValueAxis())
    valueAxis.renderer.minGridDistance = 60
    valueAxis.startLocation = 0.5
    valueAxis.endLocation = 0.5
    // valueAxis.baseValue = {

    // }
    return valueAxis
  }
  createYAxis = () => {
    let chart = this.chart
    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true
    return valueAxis
  }
  createOne = () => {
    let chart = this.chart
    let series = chart.series.push(new am4charts.LineSeries())
    series.dataFields.valueX = 'year'
    series.name = 'cars'
    series.dataFields.valueY = 'cars'
    // series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    // series.tooltipText = "[#000]{valueY.value}[/]";
    // series.tooltip.background.fill = am4core.color("#FFF");
    // series.tooltip.getStrokeFromObject = true;
    // series.tooltip.background.strokeWidth = 3;
    // series.tooltip.getFillFromObject = false;
    series.fillOpacity = 0.2;
    series.strokeWidth = 0;
    series.stacked = true;

    // let bullet = series.bullets.push(new am4charts.Bullet());
    // let image = bullet.createChild(am4core.Image);
    // image.horizontalCenter = "middle";
    // image.verticalCenter = "bottom";
    // image.dy = 0;
    // image.y = am4core.percent(100);
    // image.propertyFields.href = "series1";
    // image.adapter.add('href', (a, b, c) => {
    //   console.log(a, b, c)
    //   return "series1"
    // })
    // image.tooltipText = series.value.tooltipText;
    // image.propertyFields.fill = "color";
    // image.filters.push(new am4core.DropShadowFilter());
    // 添加渐变色
    let gradient = new am4core.LinearGradient();
    gradient.addColor('#018580')
    gradient.addColor('white');
    gradient.rotation += 90
    series.fill = gradient;
  }
  createTwo = () => {
    let chart = this.chart
    let series2 = chart.series.push(new am4charts.LineSeries());
    series2.name = "motorcycles";
    series2.dataFields.valueX = "year";
    series2.dataFields.valueY = "motorcycles";
    series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series2.tooltipText = "[#000]{valueY.value}[/]";
    series2.tooltip.background.fill = am4core.color("#FFF");
    series2.tooltip.getFillFromObject = false;
    series2.tooltip.getStrokeFromObject = true;
    series2.tooltip.background.strokeWidth = 3;
    series2.sequencedInterpolation = true;
    series2.fillOpacity = 0.6;
    series2.stacked = true;
    series2.strokeWidth = 0;

    let bullet = series2.bullets.push(new am4charts.Bullet());
    let image = bullet.createChild(am4core.Image);
    image.horizontalCenter = "middle";
    image.verticalCenter = "bottom";
    image.dy = 20;
    image.y = am4core.percent(100);
    image.propertyFields.href = "series2";
    // image.tooltipText = series.value.tooltipText;
    image.propertyFields.fill = "color";
    image.filters.push(new am4core.DropShadowFilter());

    let gradient = new am4core.LinearGradient();
    gradient.addColor('#1564B5')
    gradient.addColor('white');
    gradient.rotation += 90
    series2.fill = gradient;
  }
  createThree = () => {
    let chart = this.chart
    let series3 = chart.series.push(new am4charts.LineSeries());
    series3.name = "bicycles";
    series3.dataFields.valueX = "year";
    series3.dataFields.valueY = "bicycles";
    series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series3.tooltipText = "[#000]{valueY.value}[/]";
    series3.tooltip.background.fill = am4core.color("#FFF");
    series3.tooltip.getFillFromObject = false;
    series3.tooltip.getStrokeFromObject = true;
    series3.tooltip.background.strokeWidth = 3;
    series3.sequencedInterpolation = true;
    series3.fillOpacity = 0.6;
    series3.defaultState.transitionDuration = 1000;
    series3.stacked = true;
    series3.strokeWidth = 0;
    this.series3 = series3

    // let bullet = series3.bullets.push(new am4charts.Bullet());





    // image.horizontalCenter = "middle";
    // image.verticalCenter = "bottom";
    // image.dy = 20;
    // image.y = am4core.percent(100);
    // image.propertyFields.href = "series3";
    // // image.tooltipText = series.value.tooltipText;
    // image.propertyFields.fill = "color";
    // image.filters.push(new am4core.DropShadowFilter());

  }
  optionChart = () => {
    let chart = this.chart
    // chart.cursor = new am4charts.XYCursor();
    // chart.cursor.xAxis = this.X;
    // chart.scrollbarX = new am4core.Scrollbar();

    // Add a legend
    chart.legend = new am4charts.Legend();
    chart.legend.position = "top";

    // // axis ranges
    let range = this.X.axisRanges.create();
    range.value = 2001
    range.endValue = 2003
    range.axisFill.fill = am4core.color('blue');
    range.axisFill.fillOpacity = 0.2;

    range.label.text = "Fines for speeding increased";
    range.label.inside = true;
    range.label.rotation = 90;
    range.label.horizontalCenter = "right";
    range.label.verticalCenter = "bottom";

    let range2 = this.X.axisRanges.create();
    range2.value = 2007
    range2.grid.stroke = chart.colors.getIndex(7);
    range2.grid.strokeOpacity = 0.6;
    range2.grid.strokeDasharray = "5,2";


    range2.label.text = "Motorcycle fee introduced";
    range2.label.inside = true;
    range2.label.rotation = 90;
    range2.label.horizontalCenter = "right";
    range2.label.verticalCenter = "bottom";


  }
  initAmchart() {
    let chart = this.chart
    chart.data = this.getChartData()
    chart.numberFormatter.numberFormat = '####'
    this.X = this.createValueAxis()
    this.Y = this.createYAxis()
    // this.createOne()
    // this.createTwo()
    this.createThree()
    this.optionChart()
    chart.events.on('ready', (ev) => {
      console.log('ready')
      let position = [2000, 60]
      let y = 80
      let x = 200
      console.log('this.Y', this.Y)
      console.log('this.Y.height', this.Y)
      console.log('anyToPoint', this.Y.anyToPoint(position[1]))
      console.log('anyToPosition', this.Y.anyToPosition(position[1]))
      console.log('getPixelX', this.Y.getPixelX(position[1]))
      console.log('getPixelY', this.Y.getPixelY(position[1]))
      console.log('getPositionLabel', this.Y.getPositionLabel(position[1]))
      // console.log('getPositionX', this.Y.getPositionX(position[1]))
      // console.log('getPositionY', this.Y.getPositionY(position[1]))
      console.log('getRelativeX', this.Y.getRelativeX(position[1]))
      console.log('getRelativeY', this.Y.getRelativeY(position[1]))
      console.log('pointToPosition', this.Y.pointToPosition(position[1]))
      console.log('positionToAngle', this.Y.positionToAngle(position[1]))
      console.log('positionToCoordinate', this.Y.positionToCoordinate(position[1]))
      console.log('positionToValue', this.Y.positionToValue(position[1]))
      console.log('valueToPoint', this.Y.valueToPoint(position[1]))
      console.log('valueToPosition', this.Y.valueToPosition(position[1]))
      console.log('xToValue', this.Y.xToValue(position[1]))
      console.log('yToValue', this.Y.yToValue(position[1]))


      console.log('this.Y', this.Y)
      console.log('this.Y.height', this.Y.height)
      console.log('anyToPoint', this.Y.anyToPoint(position[0], position[1]))
      console.log('anyToPosition', this.Y.anyToPosition(position[0], position[1]))
      console.log('getPixelX', this.Y.getPixelX(position[0], position[1]))
      console.log('getPixelY', this.Y.getPixelY(position[0], position[1]))
      console.log('getPositionLabel', this.Y.getPositionLabel(position[0], position[1]))
      console.log('getRelativeX', this.Y.getRelativeX(position[0], position[1]))
      console.log('getRelativeY', this.Y.getRelativeY(position[0], position[1]))
      console.log('pointToPosition', this.Y.pointToPosition(position[0], position[1]))
      console.log('positionToAngle', this.Y.positionToAngle(position[0], position[1]))
      console.log('positionToCoordinate', this.Y.positionToCoordinate(position[0], position[1]))
      console.log('positionToValue', this.Y.positionToValue(position[0], position[1]))
      console.log('valueToPoint', this.Y.valueToPoint(position[0], position[1]))
      console.log('valueToPosition', this.Y.valueToPosition(position[0], position[1]))
      console.log('xToValue', this.Y.xToValue(position[0], position[1]))
      console.log('yToValue', this.Y.yToValue(position[0], position[1]))

      let axisRanges = this.X.axisRanges.create()
      axisRanges.value = 2000
      axisRanges.bullet = new am4core.Rectangle()
      let h = this.Y.yToValue(position[1])
      axisRanges.bullet.height = h;
      axisRanges.bullet.dy = -h;
      axisRanges.bullet.width = 100
      axisRanges.bullet.fill = am4core.color("#f00");
      axisRanges.label.inside = true
      console.log('axisRanges', axisRanges)
      // axisRanges.parent = this.series3
      axisRanges.parent = this.chart.bulletsContainer
      axisRanges.bullet.zIndex = 10
      axisRanges.parent = this.chart.bulletsContainer

    })

  }
  componentDidMount() {
    // Create chart instance
    // Themes begin
    // am4core.useTheme(am4themes_animated);
    // Themes end
    // / Create chart instance
    let chart = am4core.create("mul-series", am4charts.XYChart);
    this.chart = chart;
    this.initAmchart()
  }
  componentWillUnmount() {
    this.chart.dispose()
  }
  render() {
    return (
      <div id='mul-series'></div>
    )
  }
}